<template>
  <a-drawer width="30%" placement="left" v-model:visible="isShow" :closable="false">
    <a-descriptions title="基本信息" :column="2" layout="vertical" :bordered="true" size="small">
      <a-descriptions-item label="下载器名称">
        <p class="no-wrap">{{form.name}}</p>
      </a-descriptions-item>
      <a-descriptions-item label="类型">
        <p class="no-wrap">{{form.type}}</p>
      </a-descriptions-item>
      <a-descriptions-item label="地址" :span="2">
        <p class="no-wrap">{{form.address}}</p>
      </a-descriptions-item>
      <a-descriptions-item label="登录名">
        <p class="no-wrap">{{form.loginname}}</p>
      </a-descriptions-item>
      <a-descriptions-item label="登录密码">
        <p class="no-wrap">{{form.loginpwd}}</p>
      </a-descriptions-item>
      <a-descriptions-item label="下载目录映射(原始目录:映射目录)" :span="2">
        <p class="no-wrap">{{form.volumeHost}}:{{form.volumeContainer}}</p>
      </a-descriptions-item>
      <a-descriptions-item label="描述" :span="2">
        <p class="no-wrap">{{form.description}}</p>
      </a-descriptions-item>
    </a-descriptions>
    <a-divider orientation="left" class="extra-title">下载器信息<a-spin :spinning="loading" size="small" :style="{marginLeft: '5px'}" /></a-divider>
    <a-descriptions :column="2" layout="vertical" :bordered="true" size="small">
      <a-descriptions-item label="状态" :span="2">
        <a-space>
          <a-badge v-if="form.status === 'disconnected'" status="default" text="未连接" />
          <a-badge v-if="form.status === 'connected'" status="processing" text="连接正常" />
          <a-button @click="reConnect" shape="round" size="small" :loading='connecting'>
            重连
          </a-button>
        </a-space>
      </a-descriptions-item>
      <a-descriptions-item label="版本" :span="2">
        <p class="no-wrap">{{form.version}}</p>
      </a-descriptions-item>
      <a-descriptions-item label="下载路径" :span="2">
        <p class="no-wrap">{{form.downloadDir}}</p>
      </a-descriptions-item>
    </a-descriptions>
  </a-drawer>
</template>

<script>
import ClientApi from '../../api/ClientApi.js'
export default {
  name: 'ClientDetail',
  props: {
  },
  data() {
    return {
      module: 'client',
      isShow: false,loading: false,
      form: {
        // status: ''
      },
      connecting: false
    }
  },
  methods: {
    open(form) {
      this.form = form
      this.loadData()
      this.isShow = true
    },
    loadData() {
      this.loading = true
      ClientApi.info(this.form.id).then(response=>{
        if (response.data.code === 1) {
          this.form = {...this.form, status: (response.data.data&&response.data.data.version?'connected':'disconnected'), ...response.data.data}
        } else {
          this.$message.error(`连接失败：${response.data.message}`)
        }
      }).then(()=>{
        this.loading = false
      })
    },
    reConnect() {
      this.connecting = true
      ClientApi.reConnect(this.form.id).then(response=>{
        if (response.data.code === 1) {
          this.loadData()
        } else {
          this.$message.error(`连接失败：${response.data.message}`)
        }
      }).then(()=>{
        this.connecting = false
      })
    }

    
  }
}
</script>
<style scoped>
.no-wrap{
  overflow-wrap: anywhere;
  margin: 0px;
}
.extra-title {
  color: gray;
  font-size: 14px;
  font-weight: 300;
}
</style>>